<template>
  <div class="power-tree">
    <header class="search">
      <el-input v-model="searchInput" clearable @clear="onReset" placeholder="请输入名称查询" />
      <el-button type="primary" @click="onSearch">查询</el-button>
    </header>
    <el-tree
      ref="treeRef"
      node-key="id"
      :data="dataSource"
      :props="treeProps"
      show-checkbox
      default-expand-all
      :expand-on-click-node="false"
      :filter-node-method="onFilterNode"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <span>{{ node.label }}</span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, useTemplateRef } from 'vue'

const props = defineProps({
  position: {
    type: String,  // left | right
    default: 'left'
  },
  offset: {
    type: String,
  },
})

const treeRef = useTemplateRef('treeRef');
const treeProps = { label: 'label', children: 'children' }
const searchInput = ref('')
const dataSource = ref([
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
])

const onSearch = () => {
  if (!treeRef.value) return;
  treeRef.value.filter(searchInput.value);
}

const onReset = () => {
  searchInput.value = '';
  onSearch();
}

const onFilterNode = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
}
</script>

<style lang="scss" scoped>
.power-tree {
  height: 100%;
  width: 300px; // 注意：实际宽度是 300 + 2 * var(--ycy-gap-base)
  display: flex;
  flex-direction: column;
  padding: var(--ycy-gap-base);
  margin: 0 var(--ycy-gap-base);
  border-radius: var(--el-border-radius-base);
  background-color: var(--el-fill-color-blank);

  .search {
    display: flex;
    align-items: center;
    margin-bottom: var(--ycy-gap-base);

    .el-button {
      margin-left: var(--ycy-gap-base);
    }
  }

  .el-tree {
    flex: 1;
    overflow: auto;
  }
}
</style>